<template>
<van-cell class="article-item" :to='`/article/${article.art_id}`'>
  <!-- 标题 -->
  <template #title><div class="title van-multi-ellipsis--l2">{{article.title}}</div></template>
  <template #label>
    <!-- 3张图片的布局 -->
    <div class='cover-wrap' v-if="article.cover.type===3">
      <div class="cover-item" v-for="item in article.cover.images" :key="item.id">
      <van-image :src="item" fit="cover" class="cover-item-image"></van-image>
      </div>
    </div>
    <!-- 作者/评论/日期 -->
    <div class="label"><span>{{article.aut_name}}</span> <span>{{article.comm_count}}评论</span> <span>{{ dayjs().to(dayjs(article.pubdate))}}</span></div>
  </template>
  <!-- 1张图片的布局 -->
  <template #default><van-image :src="article.cover.images[0]" fit="cover" v-if="article.cover.type===1" class="right-cover"></van-image></template>

</van-cell>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  setup (props) {
    return { dayjs }
  }
}
</script>

<style lang='less' scoped>
.article-item{
  .title{
    font-size: 32px;
    color: #3a3a3a;
  }
  /deep/.van-cell__value{
    flex: unset;
    height: 146px;
    .right-cover {
      padding-left: 25px;
      width:232px;
      height:146%;
    }
  }
  .label span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
  .cover-wrap{
    display: flex;
    padding: 30px 0;
    .cover-item{
      flex: 1;// 让子元素水平平分布局空间
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-image{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
